<template>
    <div style="margin-top:30px">
        <el-form ref="form" :rules="rules" :model="form" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="报表名称" prop="name" style="margin-right:15px">
                                <el-input v-model.trim="form.name" @change="(value)=>{form.name = value.replace(/\s/g,'')}" placeholder="请输入报表名称" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="报表类型" prop="type" style="margin-right:15px">
                                <el-select v-model="form.type" placeholder="请选择" clearable>
                                   <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="报表备注" prop="remark" style="margin-right:15px">
                                <el-input type="textarea" :rows="3" v-model="form.remark" placeholder="请输入备注" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <el-form-item label="是否是默认" prop="isDefault" style="margin-right:15px">
                        <el-switch v-model.number="form.isDefault" active-color="#13ce66" inactive-color="#DDDDDD" :active-value="1" :inactive-value="0" />
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="funcCancel">取 消</el-button>
            <el-button type="primary" @click="funcSubmit">确 定</el-button>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import request from '@/utils/request'
    Vue.use(VXETable)
    export default {
        name: 'diyReportAdd',
        data() {
            return {
                form: {
                    code: '',
                    branchCode: '',
                    name: '',
                    type: '',
                    isDefault: 1,
                    remark: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入报表名称', trigger: 'blur' },

                    ],
                    remark: [
                         { min: 1, max: 255, message: '长度在 1 到 255个字符', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择报表类型', trigger: 'change' },
                    ]
                },
                // 报表类型
                typeOptions: [
                  { label: '库存明细', value: 0, color: 'gray' },
                  { label: '出库流水', value: 1, color: '#0000ff' },
                  { label: '入库流水', value: 2, color: '#0000ff' },
                ],
                // 是否默认
                isDefaultOptions: [
                    { label: '否', value: 0, color: 'gray' },
                    { label: '是', value: 1, color: '#0000ff' }
                ]
            }
        },
        created() {},
        methods: {
            //提交
            funcSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const data = this.form
                        const rLoading = this.openLoading();
                        request({ url: '/wms/diyReport', method: 'post', params: data }).then(response => {
                            rLoading.close();
                            this.$message({ message: response.msg, type: 'success' })
                            this.$emit('fatherAddMethod')
                        }).then(()=>this.$refs['form'].resetFields())
                    } else {
                        return false;
                    }
                });
            },
            //取消
            funcCancel() {
                this.$emit('fatherCancelMethod','add')
            }
        }
    }
</script>
<style lang="scss" scoped>
    .dialog-footer {
        margin:15px 0 15px 0;
        width: 175px;
        float: right;
    }
    .el-select {
      width: 100%;
    }
</style>
